<template>
  <van-tabbar>
    <template v-for="(item, index) in tabbarList">
      <van-tabbar-item :icon="item.icon" :to="{path:item.path }" :class="{'tab_active': $route.path === item.path}">
        {{item.name}}
      </van-tabbar-item>
    </template>
  </van-tabbar>
</template>

<script>
import { Tabbar, TabbarItem } from 'vant'
export default {
  name: 'sFooter',
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem
  },
  data () {
    return {
      active: 0,
      tabbarList: [
        {
          index: 0,
          name: '首页',
          icon: 'wap-home',
          path: '/index'
        },
        {
          index: 1,
          name: '品牌',
          icon: 'shop',
          path: '/brand'
        },
        {
          index: 2,
          name: '分类',
          icon: 'idcard',
          path: '/assortment'
        },
        {
          index: 3,
          name: '采购单',
          icon: 'records',
          path: '/shopcart'
        },
        {
          index: 4,
          name: '我的',
          icon: 'contact',
          path: '/index'
        }
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
  .tab_active
    color #ff7533
</style>
